<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>V8 引擎如何进行垃圾内存的回收 | yanyan</title>
    <meta name="description" content="Yan&#39;s blog">
    <meta name="generator" content="VuePress 1.4.0">
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.slim.min.js"></script>
  <script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css">
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    
    <link rel="preload" href="/assets/css/0.styles.e1b3f17d.css" as="style"><link rel="preload" href="/assets/js/app.e358a08d.js" as="script"><link rel="preload" href="/assets/js/2.88fa18d1.js" as="script"><link rel="preload" href="/assets/js/49.73b61cc6.js" as="script"><link rel="prefetch" href="/assets/js/10.23baf844.js"><link rel="prefetch" href="/assets/js/11.45c148ba.js"><link rel="prefetch" href="/assets/js/12.e5930132.js"><link rel="prefetch" href="/assets/js/13.0547cd14.js"><link rel="prefetch" href="/assets/js/14.3e67795b.js"><link rel="prefetch" href="/assets/js/15.51129890.js"><link rel="prefetch" href="/assets/js/16.6987f89d.js"><link rel="prefetch" href="/assets/js/17.2807cff5.js"><link rel="prefetch" href="/assets/js/18.855e1707.js"><link rel="prefetch" href="/assets/js/19.6da24791.js"><link rel="prefetch" href="/assets/js/20.e24d4aef.js"><link rel="prefetch" href="/assets/js/21.6efc6fba.js"><link rel="prefetch" href="/assets/js/22.10447f0f.js"><link rel="prefetch" href="/assets/js/23.9154cc24.js"><link rel="prefetch" href="/assets/js/24.9ad529fc.js"><link rel="prefetch" href="/assets/js/25.4c092e0a.js"><link rel="prefetch" href="/assets/js/26.debdaa01.js"><link rel="prefetch" href="/assets/js/27.8b90b660.js"><link rel="prefetch" href="/assets/js/28.1a323e01.js"><link rel="prefetch" href="/assets/js/29.6f108fc9.js"><link rel="prefetch" href="/assets/js/3.7210d3aa.js"><link rel="prefetch" href="/assets/js/30.e7df1937.js"><link rel="prefetch" href="/assets/js/31.2cb3120f.js"><link rel="prefetch" href="/assets/js/32.eb64932c.js"><link rel="prefetch" href="/assets/js/33.cac3e2f0.js"><link rel="prefetch" href="/assets/js/34.19ea35c4.js"><link rel="prefetch" href="/assets/js/35.fadf5d03.js"><link rel="prefetch" href="/assets/js/36.88b681f1.js"><link rel="prefetch" href="/assets/js/37.2a799db9.js"><link rel="prefetch" href="/assets/js/38.2741a2bf.js"><link rel="prefetch" href="/assets/js/39.359ceb72.js"><link rel="prefetch" href="/assets/js/4.9e938666.js"><link rel="prefetch" href="/assets/js/40.56fd4a10.js"><link rel="prefetch" href="/assets/js/41.e72117ad.js"><link rel="prefetch" href="/assets/js/42.63a6e190.js"><link rel="prefetch" href="/assets/js/43.c8072421.js"><link rel="prefetch" href="/assets/js/44.84cd8367.js"><link rel="prefetch" href="/assets/js/45.0ac810b0.js"><link rel="prefetch" href="/assets/js/46.bb83ff34.js"><link rel="prefetch" href="/assets/js/47.a9333a81.js"><link rel="prefetch" href="/assets/js/48.526b5494.js"><link rel="prefetch" href="/assets/js/5.88b252c7.js"><link rel="prefetch" href="/assets/js/50.f34ab799.js"><link rel="prefetch" href="/assets/js/51.d06a49d9.js"><link rel="prefetch" href="/assets/js/52.348d5482.js"><link rel="prefetch" href="/assets/js/6.0face56b.js"><link rel="prefetch" href="/assets/js/7.31eca58d.js"><link rel="prefetch" href="/assets/js/8.69e9ce95.js"><link rel="prefetch" href="/assets/js/9.f25df9e1.js">
    <link rel="stylesheet" href="/assets/css/0.styles.e1b3f17d.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">yanyan</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/html/001" class="sidebar-heading clickable"><span>HTML</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/css/image" class="sidebar-heading clickable"><span>CSS</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js/001" class="sidebar-heading clickable"><span>JS-基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js-v8/001" class="sidebar-heading clickable open"><span>JS-V8引擎原理 </span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/js-v8/001.html" class="sidebar-link">01.JavaScript内存机制之问——数据是如何存储的？</a></li><li><a href="/js-v8/002.html" class="active sidebar-link">02.V8 引擎如何进行垃圾内存的回收？</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/js-v8/002.html#v8-内存限制" class="sidebar-link">V8 内存限制</a></li><li class="sidebar-sub-header"><a href="/js-v8/002.html#新生代内存的回收" class="sidebar-link">新生代内存的回收</a></li><li class="sidebar-sub-header"><a href="/js-v8/002.html#老生代内存的回收" class="sidebar-link">老生代内存的回收</a></li><li class="sidebar-sub-header"><a href="/js-v8/002.html#增量标记" class="sidebar-link">增量标记</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js-async/001" class="sidebar-heading clickable"><span>JS-异步I/O及异步编程</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/http/000" class="sidebar-heading clickable"><span>HTTP</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/extend/002" class="sidebar-heading clickable"><span>拓展阅读</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="v8-引擎如何进行垃圾内存的回收"><a href="#v8-引擎如何进行垃圾内存的回收" class="header-anchor">#</a> V8 引擎如何进行垃圾内存的回收</h1> <p>JS 语言不像 C/C++, 让程序员自己去开辟或者释放内存，而是类似Java，采用自己的一套垃圾回收算法进行自动的内存管理。作为一名资深的前端工程师，对于JS内存回收的机制是需要非常清楚, 以便于在极端的环境下能够分析出系统性能的瓶颈，另一方面，学习这其中的机制，也对我们深入理解JS的闭包特性、以及对内存的高效使用，都有很大的帮助</p> <h2 id="v8-内存限制"><a href="#v8-内存限制" class="header-anchor">#</a> V8 内存限制</h2> <p>在其他的后端语言中，如Java/Go, 对于内存的使用没有什么限制，但是JS不一样，V8只能使用系统的一部分内存，具体来说，在64位系统下，V8最多只能分配1.4G, 在 32 位系统中，最多只能分配0.7G。你想想在前端这样的大内存需求其实并不大，但对于后端而言，nodejs如果遇到一个2G多的文件，那么将无法全部将其读入内存进行各种操作了。</p> <p>我们知道对于栈内存而言，当ESP指针下移，也就是上下文切换之后，栈顶的空间会自动被回收。但对于堆内存而言就比较复杂了，我们下面着重分析堆内存的垃圾回收。</p> <p>上一篇我们提到过了，所有的对象类型的数据在JS中都是通过堆进行空间分配的。当我们构造一个对象进行赋值操作的时候，其实相应的内存已经分配到了堆上。你可以不断的这样创建对象，让 V8 为它分配空间，直到堆的大小达到上限。</p> <p>那么问题来了，V8 为什么要给它设置内存上限？明明我的机器大几十G的内存，只能让我用这么一点？</p> <p>究其根本，是由两个因素所共同决定的，一个是JS单线程的执行机制，另一个是JS垃圾回收机制的限制。</p> <p>首先JS是单线程运行的，这意味着一旦进入到垃圾回收，那么其它的各种运行逻辑都要暂停; 另一方面垃圾回收其实是非常耗时间的操作，V8 官方是这样形容的:</p> <blockquote><p>以 1.5GB 的垃圾回收堆内存为例，V8 做一次小的垃圾回收需要50ms 以上，做一次非增量式(ps:后面会解释)的垃圾回收甚至要 1s 以上。</p></blockquote> <p>可见其耗时之久，而且在这么长的时间内，我们的JS代码执行会一直没有响应，造成应用卡顿，导致应用性能和响应能力直线下降。因此，V8 做了一个简单粗暴的选择，那就是限制堆内存，也算是一种权衡的手段，因为大部分情况是不会遇到操作几个G内存这样的场景的。</p> <p>不过，如果你想调整这个内存的限制也不是不行。配置命令如下:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 这是调整老生代这部分的内存，单位是MB。后面会详细介绍新生代和老生代内存</span>
node <span class="token operator">--</span>max<span class="token operator">-</span>old<span class="token operator">-</span>space<span class="token operator">-</span>size<span class="token operator">=</span><span class="token number">2048</span> xxx<span class="token punctuation">.</span>js 
</code></pre></div><p>或者</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 这是调整新生代这部分的内存，单位是 KB。</span>
node <span class="token operator">--</span>max<span class="token operator">-</span><span class="token keyword">new</span><span class="token operator">-</span>space<span class="token operator">-</span>size<span class="token operator">=</span><span class="token number">2048</span> xxx<span class="token punctuation">.</span>js
</code></pre></div><h2 id="新生代内存的回收"><a href="#新生代内存的回收" class="header-anchor">#</a> 新生代内存的回收</h2> <p>V8 把堆内存分成了两部分进行处理——新生代内存和老生代内存。顾名思义，新生代就是临时分配的内存，存活时间短， 老生代是常驻内存，存活的时间长。V8 的堆内存，也就是两个内存之和。</p> <p><a data-fancybox="" title="result" href="/images/js-v8-memory.jpg"><img src="/images/js-v8-memory1.jpg" alt="result"></a></p> <p>根据这两种不同种类的堆内存，V8 采用了不同的回收策略，来根据不同的场景做针对性的优化。</p> <p>首先是新生代的内存，刚刚已经介绍了调整新生代内存的方法，那它的内存默认限制是多少？在 64 位和 32 位系统下分别为 32MB 和 16MB。够小吧，不过也很好理解，新生代中的变量存活时间短，来了马上就走，不容易产生太大的内存负担，因此可以将它设的足够小。</p> <p>那好了，新生代的垃圾回收是怎么做的呢？</p> <p>首先将新生代内存空间一分为二:</p> <p><a data-fancybox="" title="result" href="/images/js-v8-memory2.jpg.jpg"><img src="/images/js-v8-memory2.jpg" alt="result"></a></p> <p>其中From部分表示正在使用的内存，To 是目前闲置的内存。</p> <p>当进行垃圾回收时，V8 将From部分的对象检查一遍，如果是存活对象那么复制到To内存中(在To内存中按照顺序从头放置的)，如果是非存活对象直接回收即可。</p> <p>当所有的From中的存活对象按照顺序进入到To内存之后，From 和 To 两者的角色对调，From现在被闲置，To为正在使用，如此循环。</p> <p>那你很可能会问了，直接将非存活对象回收了不就万事大吉了嘛，为什么还要后面的一系列操作？</p> <p>注意，我刚刚特别说明了，在To内存中按照顺序从头放置的，这是为了应对这样的场景:</p> <p><a data-fancybox="" title="result" href="/images/js-v8-memory4.jpg.jpg"><img src="/images/js-v8-memory4.jpg" alt="result"></a></p> <p>深色的小方块代表存活对象，白色部分表示待分配的内存，由于堆内存是连续分配的，这样零零散散的空间可能会导致稍微大一点的对象没有办法进行空间分配，这种零散的空间也叫做 <strong>内存碎片</strong> 。刚刚介绍的新生代垃圾回收算法也叫Scavenge算法。</p> <p><strong>Scavenge</strong> 算法主要就是解决内存碎片的问题，在进行一顿复制之后，To空间变成了这个样子:</p> <p><a data-fancybox="" title="result" href="/images/js-v8-memory5.jpg.jpg"><img src="/images/js-v8-memory5.jpg" alt="result"></a></p> <p>是不是整齐了许多？这样就大大方便了后续连续空间的分配。</p> <p>不过Scavenge 算法的劣势也非常明显，就是内存只能使用新生代内存的一半，但是它只存放生命周期短的对象，这种对象一般很少，因此时间性能非常优秀。</p> <h2 id="老生代内存的回收"><a href="#老生代内存的回收" class="header-anchor">#</a> 老生代内存的回收</h2> <p>刚刚介绍了新生代的回收方式，那么新生代中的变量如果经过多次回收后依然存在，那么就会被放入到<code>老生代内存</code>中，这种现象就叫<code>晋升</code>。</p> <p>发生晋升其实不只是这一种原因，我们来梳理一下会有那些情况触发晋升:</p> <ul><li>已经经历过一次 Scavenge 回收。</li> <li>To（闲置）空间的内存占用超过25%。</li></ul> <p>现在进入到老生代的垃圾回收机制当中，老生代中累积的变量空间一般都是很大的，当然不能用Scavenge算法啦，浪费一半空间不说，对庞大的内存空间进行复制岂不是劳民伤财？</p> <p>那么对于老生代而言，究竟是采取怎样的策略进行垃圾回收的呢？</p> <p>第一步，进行标记-清除。这个过程在《JavaScript高级程序设计(第三版)》中有过详细的介绍，主要分成两个阶段，即标记阶段和清除阶段。首先会遍历堆中的所有对象，对它们做上标记，然后对于代码环境中<code>使用的变量</code>以及被<code>强引用</code>的变量取消标记，剩下的就是要删除的变量了，在随后的<code>清除阶段</code>对其进行空间的回收。</p> <p>当然这又会引发内存碎片的问题，存活对象的空间不连续对后续的空间分配造成障碍。老生代又是如何处理这个问题的呢？</p> <p>第二步，整理内存碎片。V8 的解决方式非常简单粗暴，在清除阶段结束后，把存活的对象全部往一端靠拢。</p> <p><a data-fancybox="" title="result" href="/images/js-v8-memory6.jpg.jpg"><img src="/images/js-v8-memory6.jpg" alt="result"></a></p> <p>由于是移动对象，它的执行速度不可能很快，事实上也是整个过程中最耗时间的部分。</p> <h2 id="增量标记"><a href="#增量标记" class="header-anchor">#</a> 增量标记</h2> <p>由于JS的单线程机制，V8 在进行垃圾回收的时候，不可避免地会阻塞业务逻辑的执行，倘若老生代的垃圾回收任务很重，那么耗时会非常可怕，严重影响应用的性能。那这个时候为了避免这样问题，V8 采取了增量标记的方案，即将一口气完成的标记任务分为很多小的部分完成，每做完一个小的部分就&quot;歇&quot;一下，就js应用逻辑执行一会儿，然后再执行下面的部分，如果循环，直到标记阶段完成才进入内存碎片的整理上面来。其实这个过程跟React Fiber的思路有点像，这里就不展开了。</p> <p>经过增量标记之后，垃圾回收过程对JS应用的阻塞时间减少到原来了1 / 6, 可以看到，这是一个非常成功的改进。</p> <p>JS垃圾回收的原理就介绍到这里了，其实理解起来是非常简单的，重要的是理解它<code>为什么要这么做</code>，而不仅仅是<code>如何做的</code>，希望这篇总结能够对你有所启发。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/js-v8/001.html" class="prev">
        01.JavaScript内存机制之问——数据是如何存储的？
      </a></span> <span class="next"><a href="/js-async/001.html">
        01.nodejs中的异步、非阻塞I/O是如何实现的？
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.e358a08d.js" defer></script><script src="/assets/js/2.88fa18d1.js" defer></script><script src="/assets/js/49.73b61cc6.js" defer></script>
  </body>
</html>
